<script setup lang="ts">
  /**
   * 该组件仅适用于表单的操作列
   * 如果有动态显示的元素的话就不要使用该组件，否则会导致元素只有一个，但是却多出了一条竖线
   */
  import { ElDivider } from 'element-plus'
  import { h } from 'vue'

  const props = defineProps({
    size: {
      type: Number,
      default: () => 0,
    },
  })

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })
</script>

<template>
  <el-space :size="props.size" :spacer="spacer">
    <slot></slot>
  </el-space>
</template>
